<template>
  <div class="bg-[#E8DCCA] min-h-screen font-song text-ink relative overflow-x-hidden">
    <!-- 顶部宣传海报 -->
    <header class="relative w-full h-[30vh] md:h-[40vh] overflow-hidden mb-8">
      <img
        src="https://picsum.photos/id/1073/1200/400"
        alt="书画艺术大赛优秀作品宣传海报"
        class="w-full h-full object-cover"
      />
      <div class="absolute inset-0 bg-ink/40 flex items-center justify-center">
        <h1
          class="text-[clamp(1.8rem,5vw,3rem)] font-kai font-bold text-white tracking-wider text-center px-4"
        >
          优秀作品展示
        </h1>
      </div>
    </header>
    <!-- 作品展示区域 -->
    <div class="max-w-6xl mx-auto px-4 pb-24">
      <div class="grid grid-cols-2 gap-5 sm:gap-5 md:gap-6 px-2 min-[320px]:grid-cols-2">
        <!-- 作品卡片1 -->
        <div class="bg-white rounded-lg overflow-hidden card-shadow w-full min-w-0">
          <div class="relative pb-[100%] overflow-hidden">
            <img
              src="@/assets/images/shufa_01.jpg"
              alt="沁园春雪选段"
              class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105"
            />
          </div>
          <div class="sm:p-4 p-2">
            <h3 class="font-kai text-xl font-bold mb-1">沁园春雪选段</h3>
            <p class="text-gray flex items-center">胡浩</p>
          </div>
        </div>

        <!-- 作品卡片2 -->
        <div class="bg-white rounded-lg overflow-hidden card-shadow">
          <div class="relative pb-[100%] overflow-hidden">
            <img
              src="@/assets/images/shufa_02.jpg"
              alt="兰亭集序"
              class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105"
            />
          </div>
          <div class="sm:p-4 p-2">
            <h3 class="font-kai text-xl font-bold mb-1">兰亭集序</h3>
            <p class="text-gray flex items-center">陈明远</p>
          </div>
        </div>

        <!-- 作品卡片3 -->
        <div class="bg-white rounded-lg overflow-hidden card-shadow">
          <div class="relative pb-[100%] overflow-hidden">
            <img
              src="@/assets/images/shufa_03.jpg"
              alt="山水清音图"
              class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105"
            />
          </div>
          <div class="sm:p-4 p-2">
            <h3 class="font-kai text-xl font-bold mb-1">山水清音图</h3>
            <p class="text-gray flex items-center">林秀雅</p>
          </div>
        </div>

        <!-- 作品卡片4 -->
        <div class="bg-white rounded-lg overflow-hidden card-shadow">
          <div class="relative pb-[100%] overflow-hidden">
            <img
              src="@/assets/images/shufa_04.jpg"
              alt="梅兰竹菊四条屏"
              class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105"
            />
          </div>
          <div class="sm:p-4 p-2">
            <h3 class="font-kai text-xl font-bold mb-1">梅兰竹菊四条屏</h3>
            <p class="text-gray flex items-center">王梦琪</p>
          </div>
        </div>

        <!-- 作品卡片5 (使用网络图片) -->
        <div class="bg-white rounded-lg overflow-hidden card-shadow">
          <div class="relative pb-[100%] overflow-hidden">
            <img
              src="https://picsum.photos/id/106/600/600"
              alt="书法作品展示"
              class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105"
            />
          </div>
          <div class="sm:p-4 p-2">
            <h3 class="font-kai text-xl font-bold mb-1">松风阁诗帖</h3>
            <p class="text-gray flex items-center">赵子昂</p>
          </div>
        </div>

        <!-- 作品卡片6 (使用网络图片) -->
        <div class="bg-white rounded-lg overflow-hidden card-shadow">
          <div class="relative pb-[100%] overflow-hidden">
            <img
              src="https://picsum.photos/id/152/600/600"
              alt="国画作品展示"
              class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105"
            />
          </div>
          <div class="sm:p-4 p-2">
            <h3 class="font-kai text-xl font-bold mb-1">富春山居图</h3>
            <p class="text-gray flex items-center">黄公望</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
